<template>
  <div class="users">
<!-- 面包屑导航 -->
    <el-breadcrumb separator-class="el-icon-arrow-right" >
      <!-- <el-breadcrumb-item :to="{ path: '/welcome' }">首页</el-breadcrumb-item> -->
      <el-breadcrumb-item>系统配置</el-breadcrumb-item>
      <el-breadcrumb-item>供水工程配置</el-breadcrumb-item>
    </el-breadcrumb> 
<!-- 卡片式图 -->
<el-row >
<div class="box-row" >
  <div class="box-left">
    
  <el-link icon="el-icon-circle-plus-outline">导出</el-link>
    <el-link icon="el-icon-printer">打印</el-link>
  </div>
  <div class="box-right">
     供水工程配置：
     <input type="text"> 
 
    巡查日期：
    
    <input type="text" icon="el-icon-date"> 
    <i class="el-icon-date"></i>
    <el-link icon="el-icon-search" >查询</el-link>
  </div>
</div> 
<!-- 表格区 -->
 <el-table
    :data="tableData"
    style="width: 100%"
    
    >
    <el-table-column
      prop="date"
      label="时间"
      width="200"
      align='center'
      >
    </el-table-column>
      <el-table-column label="出水口" align='center'>
        <el-table-column
          prop="PH"
          label="PH"
          width="120"
          align='center'
          >
        </el-table-column>
        <el-table-column
          prop="Ntu"
          label="Ntu"
          width="120"
          align='center'
          >
        </el-table-column>
        <el-table-column
          prop="yulv"
          label="余氯(mg/L)"
          width="120"
          align='center'
          >
        </el-table-column>
        <el-table-column
          prop="timedflow"
          label="限时流量(M/h)"
          width="140"
          align='center'
          >
        </el-table-column>
        <el-table-column
          prop="traffic"
          label="总流量"
          width="160"
          align='center'
          >
        </el-table-column>
        <el-table-column
          prop="Mpa"
          label="压力(Mpa)"
          width="120"
          align='center'
          >
        </el-table-column>
      </el-table-column>
     
    <el-table-column
      prop="consumption"
      label="用电量(kw/h)"
      width="200"
      align='center'
      >
    </el-table-column>
      <el-table-column label="进线柜"
      align='center'
      >
        <el-table-column
          prop="Ua"
          label="Ua(V)V"
          width="120"
          align='center'
          >
        </el-table-column>
        <el-table-column
          prop="Ub"
          label="Ub(V)"
          width="120"
          align='center'
          >
        </el-table-column>
        <el-table-column
          prop="Uc"
          label="Uc(V)"
          width="120"
          align='center'
          >
        </el-table-column>
        <el-table-column
          prop="la"
          label="la(A)"
          width="120"
          align='center'
          >
        </el-table-column>
        <el-table-column
          prop="lb"
          label="lb(A)"
          width="120"
          align='center'
          >
        </el-table-column>
        <el-table-column
          prop="lc"
          label="lc(A)"
          width="120"
          align='center'
          >
        </el-table-column>
        <el-table-column
          prop="PK"
          label="PK(W)"
          width="120"
          align='center'
          >
        </el-table-column>
        <el-table-column
          prop="Q"
          label="Q(KVar)"
          width="120"
          align='center'
          >
        </el-table-column>
        <el-table-column
          prop="COS"
          label="COS(Φ)"
          width="120"
          align='center'
          >
        </el-table-column>
      </el-table-column>
    
  
  </el-table>
  
  
 </el-row> 
    <el-pagination
      :page-sizes="[1, 5, 7, 9]"
      :page-size="100"
      layout="total, sizes, prev, pager, next, jumper"
      :total="8">
    </el-pagination>

     </div>
</template>

<script>
export default {
 data() {
      return {
        
        tableData: [{
          date: '2016-05-03 18:00:00',
          PH: '7.31',
          Ntu: "1.03",
          yulv: "0.34",
          timedflow: "43.40",
          traffic: "1329078.00",
          Mpa: "0.22",
          consumption: "710298.25" ,  
          Ua: "298.25" , 
          Ub: "258.28" , 
          Uc: "228.28" , 
          la: "102.25" , 
          lb: "115.88" , 
          lc: "165.66" , 
          PK: "77.77" , 
          Q: "66.88" , 
          COS: "0.99" , 
         
     },
     {
          date: '2016-05-03 18:00:00',
          PH: '7.31',
          Ntu: "1.03",
          yulv: "0.34",
          timedflow: "43.40",
          traffic: "1329078.00",
          Mpa: "0.22",
          consumption: "710298.25" ,  
          Ua: "298.25" , 
          Ub: "258.28" , 
          Uc: "228.28" , 
          la: "102.25" , 
          lb: "115.88" , 
          lc: "165.66" , 
          PK: "77.77" , 
          Q: "66.88" , 
          COS: "0.99" , 
         
     },
     {
          date: '2016-05-03 18:00:00',
          PH: '7.31',
          Ntu: "1.03",
          yulv: "0.34",
          timedflow: "43.40",
          traffic: "1329078.00",
          Mpa: "0.22",
          consumption: "710298.25" ,  
          Ua: "298.25" , 
          Ub: "258.28" , 
          Uc: "228.28" , 
          la: "102.25" , 
          lb: "115.88" , 
          lc: "165.66" , 
          PK: "77.77" , 
          Q: "66.88" , 
          COS: "0.99" , 
         
     }
      ],
        
      }
 },
 methods: {
      handleSizeChange(val) {
        console.log(`每页 ${val} 条`);
      },
      handleCurrentChange(val) {
        console.log(`当前页: ${val}`);
      }
    },
}
</script>

<style lang="less" scoped>
.users{
  
   .el-breadcrumb{
     background-color: #E9EDF0 !important;
    height: 50px;
line-height: 50px;
font-size: 14px;
padding-left: 5px;
   }
 .el-row{
     background:rgb(91,146,211);
   
.box-row{
  display: flex;
  justify-content: space-between;
  align-items: center;
  background:rgb(91,146,211);
  color: #fff;
  box-sizing: border-box;

  .box-left{
    padding: 5px;
    .el-link{
padding: 15px;
color: #fff;
    }

  }
  .box-right{
padding-right: 10px;
// overflow：hidden
 input{
  
  height:25px;
}
.el-link{
  padding-left: 10px;
   color: #fff;
}

  }
}
   }
   
.el-pagination{
       background: rgb(241, 241, 241);
       margin: 5px;
     }
  
  
}
</style>